<!--
 * @Author: zhoujieyu zhoujieyu_web@163.com
 * @Date: 2024-08-28 14:23:49
 * @LastEditors: zhoujieyu zhoujieyu_web@163.com
 * @LastEditTime: 2024-08-29 10:13:42
 * @FilePath: \code\面板设置.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>面板设置</title>
    <link rel="stylesheet" href="./lib/styles.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
  </head>
  <body>
    <div id="player"></div>

    <div class="btn-list">
      <div onclick="setMainUI()" class="btn">设置主界面UI</div>
      <div onclick="setCampass()" class="btn">设置指北针</div>
    </div>

    <script type="text/javascript">
      /**
       * 设置主界面UI显隐
       */
      let MainUIFlag = true
      const setMainUI = () => {
        MainUIFlag = !MainUIFlag
        // 设置主界面UI显隐
        fdapi.settings.setMainUIVisibility(MainUIFlag)
      }

      /**
       * 设置指北针
       */
      let CampassFlag = true
      const setCampass = () => {
        CampassFlag = !CampassFlag
        // 设置指北针位置
        fdapi.settings.setCampassPosition(100, 100)
        // 设置指北针显隐
        // fdapi.settings.setCampassVisible(CampassFlag)
      }

      /**
       * 初始化场景
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player',
          ui: {
            startupInfo: false, //可选参数，是否显示页面加载详细信息，默认值false
            statusButton: true, //可选参数，是否显示状态按钮，默认false
            fullscreenButton: true, //可选参数，是否在左下角显示“全屏”按钮
            homeButton: false, //可选参数，是否在左下角显示“回到初始位置”按钮，默认false
            mainUI: MainUIFlag, //可选参数，是否显示Cloud工具栏
            campass: CampassFlag //可选参数，是否显示指北针
          },

          apiOptions: {
            onReady: function () {
              fdapi.reset()
            }
          }
        })
      }

      /**
       * 自适应分辨率
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      // 页面加载调用
      window.addEventListener('load', OnLoad, true)

      // 页面窗口变换调用
      window.addEventListener('resize', onResize, true)

      /**
       * 页面离开事件(离开时清除此页面的操作及重置场景)
       */
      window.onunload = function (e) {
        // 重置场景
        fdapi.reset()
      }
    </script>
  </body>
</html>
